<!DOCTYPE html>
<html>
<head>
    <title>border</title>
    <style type="text/css">

    @font-face{
        font-family: myFont;
        src：url('myFont/Sansation_Light.ttf');
    }

    body{
        background: url("img/bg.png") no-repeat;
        /*背景图片的尺寸*/
        /*background-size: 200px 100px;*/
        /*百分比是相对于body的width和height*/
        background-size: 20% 50%;  
    }

    div{
        margin:20px;
    }

    .box{
        width: 200px;
        height: 50px;
        border:2px solid #edc;
        /*圆角边框*/
        border-radius:25px;  
        /*阴影*/ 
        box-shadow: 10px 10px 5px #abc inset;  
    }

    .box2{
        width: 200px;
        height: 50px;
        border:2px solid #edc;
        /*圆角边框*/
        border-top-left-radius: 2em 0.5em;
        border-top-right-radius: 1em 3em;
        border-bottom-right-radius: 4em 0.5em;
        border-bottom-left-radius: 1em 3em;
    }
    .round,.stretch{
        border:15px solid transparent;
        width: 300px;
        padding:10px 20px;
    }

    .round{
       /*边框背景*/
        border-image: url("img/border.png") 30 30 round;
    }

    .stretch{
        /*边框背景*/
        border-image: url("img/border.png") 30 30 stretch;
    }

    .breakword{
        width: 200px;
        border:1px solid black;
        /*允许对长单词进行拆分，并换行到下一行：*/
        word-wrap:break-word;
    }

    .textshadow{
        font-size:30px;
        /*文本阴影*/
        text-shadow:2px 2px 1px #ccc;
    }

    .xxFont{
        font-family: myFont;
    }

    .rotate{
        width:200px;
        height: 100px;
        background-color: #ebc;
        /*通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。*/
        transform:rotate(9deg);
        -webkit-transform: rotate(9deg);
    }

    .translate{
        width:200px;
        height: 100px;
        background-color: #ebe;
        /*通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数*/
        transform:translate(50px,10px);
        -webkit-transform: translate(50px,10px);
    }

    .scale-orig, .scale{
        width:100px;
        height: 50px;
        background-color: #ebb;
        border:1px solid black;
    }
    .scale{
        margin:100px;
        /*通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：*/
        transform:scale(0.5,3);
        -webkit-transform: scale(0.5,3);
    }
    .skew{
        width:100px;
        height: 50px;
        background-color: #eeb;
        border:1px solid black;
        /*通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：*/
        transform: skew(30deg,20deg);
        -webkit-transform: skew(30deg,20deg);
    }

    .rotateX{
        width:100px;
        height: 50px;
        background-color: #eeb;
        border:1px solid black;
       /*通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。*/
        transform: rotateX(130deg);
        -webkit-transform: rotateX(130deg);
    }

    .rotateY{
        width:100px;
        height: 50px;
        background-color: #eeb;
        border:1px solid black;
       /*通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。*/
        transform: rotateY(130deg);
        -webkit-transform: rotateY(130deg);
    }

    /*CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。*/
    .trans{
        width:100px;
        height: 50px;
        background-color: #eeb;
        /*规定效果的时长*/
        transition:width 2s;
        -webkit-transition:width 2s;
    }
    .trans:hover{
        width:200px;
    }

    .trans2{
        width:40px;
        height: 50px;
        border-radius:4px;
        background-color: #ceb;
        transition:width 2s, height 2s, background-color 2s,transform 2s;
        -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    }
    .trans2:hover{
        width:80px;
        height: 100px;
        background-color: #cbe;
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }

    
    .cubic{
        height: 40px;
        list-style: none;
        clear:both;
    }
    .cubic li{
        width: 40px;
        height: 40px;
        border-radius: 4px;
        background-color: #ceb;
        float:left;
        margin-left: 20px;
        transition:background-color 0.5s,transform linear 0.5s;
        -webkit-transition:background-color 0.5s, -webkit-transform linear 0.5s;
        /*-webkit-transition:width 1s linear 2s;*/
    }
    .cubic li:hover{
        background-color: #cec;
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }

    /*css动画*/
    /*关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。*/
    @keyframes changeColor{
        from{background-color: red}
        to{background-color: yellow}
    }
    @-webkit-keyframes changeColor{
        from{background-color: red}
        to{background-color: yellow}
    }

    .changeColor{
        width: 50px;
        height: 50px;
        background-color: red;
        animation:changeColor 5s;
        -webkit-animation:changeColor 5s;
    }

    @keyframes changeColor2{
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }
    @-webkit-keyframes changeColor2{
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }
    .changeColor2{
        width: 60px;
        height: 60px;
        background-color: green;
        animation:changeColor2 5s;
        -webkit-animation:changeColor2 5s;
    }

    @keyframes changeColor3{
        
    }
    @-webkit-keyframes changeColor3{
        0%{
            top:0;
            left: 0;
            background-color: #92b901;
        }
        20%{
            top:0;
            left: 0;
            transform:rotate(30deg);
            -webkit-transform:rotate(30deg);
        }
        50%{
            top:-100px;
            left: 800px;
            background-color: #ecb92b;
            transform:rotate(0deg);
            -webkit-transform:rotate(0deg);
        }
        100%{
            top: 0;
            left:0;
            transform:rotate(360deg);
            -webkit-transform:rotate(360deg);
        }
    }
    .changeColor3{
        width: 60px;
        height: 40px;
        padding:20px 10px 0 10px;
        border-radius: 4px;
        background-color: #92b901;
        color:#ffffff;
        font-weight: bold;
        font-size:12px;
        position: relative;

        animation:changeColor3 3s infinite alternate;
        -webkit-animation:changeColor3 3s infinite alternate;
    }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="round">在这里，图片铺满整个边框。</div>
    <div class="stretch">在这里，图片被拉伸以填充该区域。</div>
    
    <p class="breakword">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

    <p class="textshadow">文本阴影</p>

    <p class="xxFont">With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.</p>

    <div class="rotate">rotate</div>
    <div class="translate">translate</div>
    <div class="scale-orig">scale-orig</div>
    <div class="scale">scale</div>
    <div class="skew">skew</div>

    <div class="rotateX">rotateX</div>
    <div class="rotateY">rotateY</div>

    <div class="trans"></div>
    <div class="trans2">css3 过渡</div>

    <ul class="cubic">
        <li></li><li></li><li></li><li></li><li></li><li></li>
    </ul>

    <div class="changeColor"></div>
    <div class="changeColor2"></div>
    <div class="changeColor3">css3动画</div>
</body>
</html>